<template>
  <div class="login-wrap">
    <div class="bg-box">
      <img src="./logo.png" class="logo" onclick="return false"/>
      <span class="logo-title">蓝聘-代理版</span>
      <div class="opt-btn-box">
        <button type="button" class="login-btn" :class="{'btn-title':showPage == 1}" @click="toResist">登录</button>
        <button type="button" class="register-btn" :class="{'btn-title':showPage == 2}" @click="toLogin">注册</button>
      </div>
    </div>

    <div class="login-box" v-if="showPage == 1">
      <div class="phone-box">
        <img src="./phone.png" class="pic1" onclick="return false"/>
        <div class="phone-con">
          <input type="text" class="phone-num" placeholder="请输入登录手机号" maxlength="11" v-model="loginPhone"/>
        </div>
      </div>

      <div class="pwd-box">
        <img src="./password.png" class="pic2" onclick="return false"/>
        <div class="pwd-con">
          <input type="password" class="pwd-num" placeholder="请输入登录密码" maxlength="16" v-model="loginPwd"
                 @blur="inputBlur"/>
        </div>
      </div>

      <div class="login-pwd-opt-box">

        <div class="remember-select-box"><input type="checkbox" class="remember-checkbox"
                                                :class="{'remember-select-icon': rememberChoice}"
                                                @click="checkIsChoice"/></div>
        <div class="remember-pwd-title">记住密码</div>
        <div class="forget-pwd" @click="forgetPage">忘记密码？</div>
      </div>


      <button class="login-text" type="button" @click="login">登&nbsp;&nbsp;录</button>

      <div class="wx-box">
        <div class="wx-login-opt" @click="openWxLogin">
          <img src="./weixin.png" class="pic3" onclick="return false"/>
          <span class="wx-title">使用微信登录</span>
        </div>
      </div>

    </div>

    <div class="register-box" v-if="showPage == 2">
      <div class="phone-box">
        <img src="./phone.png" class="pic1" onclick="return false"/>
        <div class="phone-con">
          <input type="text" class="phone-num" placeholder="请输入登录手机号" maxlength="11" v-model="registerPhone"/>
        </div>
      </div>

      <div class="verify-box">
        <img src="./code.png" class="pic4" onclick="return false"/>
        <div class="code-con">
          <div class="code-box">
            <input class="code" type="number" oninput="if(value.length>6)value=value.slice(0,6)" placeholder="请输入验证码"
                   v-model="code"/>
          </div>
          <timer-btn ref="timerBtn" class="mobile" v-on:run="sendCode"></timer-btn>
        </div>
      </div>

      <div class="pwd-box">
        <img src="./password.png" class="pic2" onclick="return false"/>
        <div class="pwd-con">
          <input type="password" class="pwd-num" placeholder="请设置6-16位密码" maxlength="16" v-model="registerPwd1"
                 @blur="inputBlur"/>
        </div>
      </div>

      <div class="pwd-box pwd-dist">
        <img src="./password.png" class="pic2" onclick="return false"/>
        <div class="pwd-con">
          <input type="password" class="pwd-num" placeholder="请再次输入密码" maxlength="16" v-model="registerPwd2"
                 @blur="inputBlur"/>
        </div>
      </div>

      <button class="register-text" type="button" @click="register">注&nbsp;&nbsp;册</button>

      <div class="protocol-box">
        <span>点击注册即表示同意</span><span class="protocol" @click="protocolPage">《用户注册协议》</span>
      </div>
    </div>

  </div>

</template>

<script>
  import code from "../../components/code"
  import {checkPhone, checkPwd, checkCode} from "../../config/verify"
  import {login, getToken, sendCode, mateCode, registerUser, wxGetCode} from '../../axios/api'
  import md5 from 'js-md5'
  import {getSessionStore, getStore, removeSessionStore, setSessionStore, setStore} from "../../config/util"
  import Cookies from 'js-cookie'

  export default {
    data() {
      return {
        showPage: 1,//1登录 2注册
        loginPhone: "",
        loginPwd: "",
        registerPhone: "",
        registerPwd1: "",
        registerPwd2: "",
        code: "",
        token1: "",
        token2: "",
        rememberChoice: true
      }
    },
    created() {
      let phone = getStore("localPhone");
      let pwd = getStore("localPwd");
      let base64 = require('js-base64').Base64;

      if (pwd) {
        this.loginPhone = phone;
        this.loginPwd = base64.decode(pwd);
      } else {
        this.loginPhone = phone;
        this.loginPwd = "";
      }
      if (getSessionStore("proxy_protocol_mark") == 8003) {
        this.showPage = 2;
      }
    },
    methods: {
      toResist() {
        removeSessionStore("proxy_protocol_mark");
        this.showPage = 1;
      },
      toLogin() {
        this.showPage = 2;
      },
      checkIsChoice() {//选记住密码
        this.rememberChoice = !this.rememberChoice;
      },
      affirmPwd() {
        let pwd1 = this.registerPwd1;
        let pwd2 = this.registerPwd2;
        if (pwd1 != pwd2) {
          this.$vux.toast.text("两次密码不一致", "middle");
          return;
        }
        return true;
      },
      sendCode() {//获取验证码
        let phone = this.registerPhone;
        if (checkPhone(phone)) {
          let param1 = {
            "phone": phone,
            "i": 0 //0 注册  1 忘记密码 2 修改密码
          };
          this.$refs.timerBtn.setDisabled(true);
          getToken(param1).then((res) => {//获取token
            this.token1 = res.data;

            let param2 = {
              "phone": phone,
              "i": 0,
              "userToken": this.token1
            };
            sendCode(param2).then((res) => {//发送验证码
              if (res.code == 0) {
                this.token2 = res.data;
                this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
                this.$refs.timerBtn.start(); //启动倒计时
              } else {
                this.$refs.timerBtn.stop();
                this.$vux.toast.text(res.msg, "middle");
              }
            });
          });
        }
      },
      register() {//注册
        let phone = this.registerPhone;
        let pwd = this.registerPwd1;
        let code = this.code;
        if (checkPhone(phone) && checkCode(code) && checkPwd(pwd, 2) && this.affirmPwd()) {
          let param1 = {
            "phone": phone,
            "i": 0,
            "code": code,
            "token": this.token2,
          };
          mateCode(param1).then((res) => {//校验验证码
            if (res.code == 0) {
              this.$vux.loading.show({
                text: '加载中',
              });
              let param2 = {
                "phone": phone,
                "password": md5(pwd),
                "type": 0
              };

              registerUser(param2).then((res) => {//注册
                this.$vux.loading.hide();
                if (res.code == 0) {
                  if (res.data == 0) {
                    this.showPage = 2;
                    this.$vux.toast.text("注册失败，请重试", "middle");
                  } else {
                    removeSessionStore("proxy_protocol_mark");
                    this.showPage = 1;
                  }
                } else {
                  this.$vux.toast.text(res.msg, "middle");
                }
              });
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          });
        }
      },
      forgetPage() {//忘记密码
        this.$router.push("/forgetPwd");
      },
      rememberPwd() {//记住密码
        let phone = this.loginPhone;
        let pwd = this.loginPwd;
        if (this.rememberChoice) {
          let base64 = require('js-base64').Base64;
          setStore("localPhone", phone);
          setStore("localPwd", base64.encode(pwd));
        } else {
          localStorage.removeItem("localPwd");
        }
      },
      login() {//登录
        let phone = this.loginPhone;
        let pwd = this.loginPwd;
        if (checkPhone(phone) && checkPwd(pwd, 1)) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let data = {"phone": phone, "password": md5(pwd), "type": 0};

          login(data).then(res => {
            this.$vux.loading.hide();
            if (res.data == "null") {
              this.$vux.toast.text("用户名或密码错误", "middle");
              return;
            } else if (res.data == "error") {
              this.$vux.toast.text("用户名或密码错误", "middle");
              return;
            } else {
              this.rememberPwd(); //回调记住密码
              let base64 = require('js-base64').Base64;
              let userArray = res.data.split("#");
              setSessionStore("userMark", base64.encode(userArray[0]));
              setSessionStore("proxy_identity", userArray[1]);
              setStore("withdraw_sign", base64.encode(userArray[0]));//验证不同用户登录后提现密码次数的问题

              if (userArray[0] != this.withdraw) { //不是当前用户清除十分钟次数和cookie的时间
                localStorage.removeItem("sess_time_local");
                Cookies.remove("sess_time_local", "", {
                  expires: -1,
                  path: ''
                })
              }
              this.$router.replace('/index');
            }
          });
        }
      },
      openWxLogin() {//微信登录
        let params = {};
        wxGetCode(params).then((res) => {
          if (res.code == 0) {
            window.location.href = res.data;
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      protocolPage() {
        setSessionStore("proxy_protocol_mark", 8003);//协议返回注册页
        this.$router.push({path: '/protocol'});
      },
      inputBlur() {
        window.scrollTo(0, 0);
      }
    },
    components: {
      "timer-btn": code
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .login-wrap {
    .wh(100%, 100%);
    background: @talent-bg-color;
    .bg-box {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(100%, 5.44rem);
      .bg-image('../page/login/login_bg.png');
      .logo {
        margin-top: 0.6rem;
        margin-bottom: 0.32rem;
        .wh(2.027rem, 2.027rem);
      }
      .logo-title {
        .size-color(0.56rem, rgba(60, 175, 255, 1));
      }
      .opt-btn-box {
        position: absolute;
        bottom: -0.027rem;
        z-index: 99;
        display: flex;
        .wh(100%, 1.44rem);
        background: rgba(242, 242, 242, 1);
        border-top-left-radius: 0.48rem;
        border-top-right-radius: 0.48rem;
        .login-btn {
          flex: 1;
          border-top-left-radius: 0.48rem;
          .size-color(0.48rem, rgba(102, 102, 102, 1));
        }
        .register-btn {
          flex: 1;
          border-top-right-radius: 0.48rem;
          .size-color(0.48rem, rgba(102, 102, 102, 1));
        }
        .btn-title {
          font-weight: 500;
          color: rgba(60, 175, 255, 1);
          background: #FFF;
        }
      }
    }
    .login-box {
      .wh(100%, auto);
      padding-top: 1.2rem;
      .phone-box {
        margin: 0 auto;
        display: flex;
        align-items: center;
        .wh(8.627rem, 1.333rem);
        border-bottom: 0.027rem solid rgba(224, 224, 224, 1);
        .pic1 {
          .wh(0.64rem, 0.64rem);
        }
        .phone-con {
          margin-left: 0.347rem;
          .phone-num {
            .size-color(0.427rem, #333)
          }
        }

      }
      .pwd-box {
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding-top: 0.267rem;
        .wh(8.627rem, 1.333rem);
        border-bottom: 0.027rem solid rgba(224, 224, 224, 1);
        .pic2 {
          .wh(0.64rem, 0.64rem);
        }
        .pwd-con {
          margin-left: 0.347rem;
          .pwd-num {
            .size-color(0.427rem, #333);
          }
        }
      }
      .login-pwd-opt-box {
        display: flex;
        padding-bottom: 0.8rem;
        padding-top: 0.48rem;
        align-items: center;
        .forget-pwd {
          margin-left: auto;
          .size-color(0.4rem, rgba(60, 175, 255, 1));
          padding-right: 0.44rem;
        }
        .remember-pwd-title {
          .size-color(0.4rem, rgba(153, 153, 153, 1));
        }
        .remember-select-box {
          .wh(0.427rem, 0.427rem);
          margin-right: 0.28rem;
          margin-left: 0.72rem;
          .remember-checkbox {
            .wh(100%, 100%);
            outline: none;
            background: rgba(60, 175, 255, 1);
            border-radius: 0.04rem;
            -webkit-appearance: none;
          }
          .remember-select-icon {
            background: url("../../images/hock.png") no-repeat center rgba(60, 175, 255, 1);
            border-radius: 0.04rem;
            background-size: 0.3rem 0.24rem;
          }
        }
      }
      .login-text {
        .fj(center, center);
        margin: 0 auto;
        .wh(9.04rem, 1.333rem);
        background: rgba(60, 175, 255, 1);
        border-radius: 0.107rem;
        .size-color(0.48rem, rgba(255, 255, 255, 1));
      }
      .wx-box {
        .fj(center, center);
        margin-top: 0.667rem;
        .wh(100%, 0.8rem);
        .wx-login-opt {
          display: flex;
          align-items: center;
          .pic3 {
            .wh(0.8rem, 0.8rem);
          }
          .wx-title {
            margin-left: 0.28rem;
            .size-color(0.4rem, rgba(153, 153, 153, 1));
          }
        }
      }
    }
    .register-box {
      .wh(100%, auto);
      padding-top: 0.267rem;
      .phone-box {
        margin: 0 auto;
        display: flex;
        align-items: center;
        .wh(8.627rem, 1.333rem);
        border-bottom: 0.027rem solid rgba(224, 224, 224, 1);
        .pic1 {
          .wh(0.64rem, 0.64rem);
        }
        .phone-con {
          margin-left: 0.347rem;
          .phone-num {
            .size-color(0.427rem, #333)
          }
        }

      }
      .pwd-box {
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding-top: 0.267rem;
        .wh(8.627rem, 1.333rem);
        border-bottom: 0.027rem solid rgba(224, 224, 224, 1);
        .pic2 {
          .wh(0.64rem, 0.64rem);
        }
        .pwd-con {
          margin-left: 0.347rem;
          .pwd-num {
            .size-color(0.427rem, #333);
          }
        }
      }
      .verify-box {
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding-top: 0.267rem;
        .wh(8.627rem, 1.333rem);
        border-bottom: 0.027rem solid rgba(224, 224, 224, 1);
        .pic4 {
          .wh(0.64rem, 0.64rem);
        }
        .code-con {
          .fj(space-between, center);
          .wh(100%, 1.173rem);
          .code-box {
            display: flex;
            align-items: center;
            width: 60%;
            .code {
              padding-left: 0.347rem;
              .size-color(0.427rem, #333);
            }
          }
          .mobile {
            margin-left: auto;
            .size-color(0.427rem, rgba(60, 175, 255, 1));
            background: #FFF;
          }
        }
      }
      .pwd-dist {
        margin-bottom: 0.48rem;
      }
      .register-text {
        .fj(center, center);
        margin: 0 auto;
        .wh(9.04rem, 1.333rem);
        background: rgba(60, 175, 255, 1);
        border-radius: 0.107rem;
        .size-color(0.48rem, rgba(255, 255, 255, 1));
      }
      .protocol-box {
        .fj(center, center);
        padding-top: 0.36rem;
        padding-bottom: 0.4rem;
        .size-color(0.373rem, rgba(102, 102, 102, 1));
        .protocol {
          color: #3CAFFF;
        }
      }
    }
  }
</style>
